<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>首页</title>
		<script src="js/Width.js" type="text/javascript" charset="utf-8"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/steward.css" />
	</head>

	<body>
		<div id="loadings" class='loadings'>
			<div class='line-scale-pulse-out'>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
			</div>
		</div>
		<div class="bottom-bow" style="bottom: 49px;"></div>
		<div id="steward">
			<!--头部-->
			<div class="steward-header">
				<span v-text="homeData.neiName||'物业管理' "></span>
				<div class="header-icon" @click="bellClick">
					<!--<i class="num">3</i>-->
					<img src="images/bell.png" />
				</div>
			</div>
			<!--头部个人信息及天气日期信息-->
			<div class="steward-weather">
				<img class="steward-brimg" src="images/index.png" />
				<div class="user">
					<div class="user-name" v-text="'Hi,'+ (homeData.empName || '员工')"></div>
					<div class="user-position" v-text="homeData.departmentName||'部门'"></div>
					<div class="user-desc" v-text="homeData.postName ||'职位'"></div>
				</div>
				<div class="weather">
					<div class="temperature">
						<div class="left" v-text="presentTime.day"></div>
						<div class="right">
							<div class="humidity">
								<span v-text="presentTime.year+'年' + presentTime.month +'月'"></span>
							</div>
							<div class="temperature-max-min">
								<span v-text="presentTime.week"></span>
							</div>
						</div>
					</div>
					<div class="result">
						<span v-text="'农历：'+result.yinli"></span>
						<span v-text=" '宜：'+ result.yi"></span>
					</div>
				</div>
			</div>

			<!--消息通知-->

			<div class="steward-notice" @click="noticeClick">
				<div class="stewrd-icon">
					<img src="images/min.png" />
				</div>
				<div class="stewrd-warpper">
					<span class="notice-txt">欢迎来到物业管家</span>
					<span class="notice-time" v-text="NewtTime"></span>
				</div>
			</div>

			<!--图标列表-->

			<div class="icon-list">
				<div class="item" v-for="item in iconList" :key="item.id" @click="openIconListClick(item)">
					<div class="item-img">
						<img :src="item.imgUrl" alt="" />
					</div>
					<div class="item-title" v-text="item.title"></div>
				</div>
			</div>

			<!--任务完成情况展示-->

			<div class="steward-task">
				<div class="backlog" @click="backlogClick(0)">
					<div class="backlog-desc">
						<span class="num" v-text="homeData.gtasks||'0'"></span>
						<span class="piece">件</span>
						<span class="desc">待办事项</span>
					</div>
					<div class="game_time">
						<div id="backlog"></div>
					</div>
				</div>
				<div class="steward-list">
					<div class="item" @click="backlogClick(1)">
						<div>
							<div>
								<span class="num" v-text="homeData.inProgress||'0'"></span>
								<span class="piece">件</span>
							</div>
							<div class="desc">待审核</div>
						</div>
						<div class="game_time">
							<div id="audit"></div>
						</div>
					</div>
					<div class="item" @click="backlogClick(2)">
						<div>
							<div>
								<span class="num" v-text="homeData.completed||'0'"></span>
								<span class="piece">件</span>
							</div>
							<div class="desc">已完成</div>
						</div>
						<div class="game_time">
							<div id="accomplish"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/util.js"></script>
		<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
		<script src="js/raphael.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="https://cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js"></script>
		<script type="text/javascript">
			window.onload = function() {

				/**
				 * 环形进度条
				 * @param el：DOM对象
				 * @param val:数值
				 * @param bg:背景颜色
				 * @param color:环颜色
				 * @param textColor：数字颜色
				 * @param fontSize：数字字体大小
				 * @param size:环宽度
				 * @param r:环内半径
				 * @param time:动画时间
				 * @param easing:动画类型:
				 *  'linear'
				 *  '<' or 'easeIn' or 'ease-in'
				 *  '>' or 'easeOut' or 'ease-out'
				 *  '<>' or 'easeInOut' or 'ease-in-out'
				 *  'backIn'or 'back-in'
				 *  'backOut' or 'back-out'
				 *  'elastic'
				 *  'bounce'
				 */
				mui.init({})

				var steward = new Vue({
					el: '#steward',
					data: {
						city: '',
						homeData: '',
						result: '',
						loading: true,
						presentTime: getNowDate(),
						iconList: [{
								id: 0,
								imgUrl: 'images/baoshi.png',
								htmlUrl: 'html/ReportMatter.html',
								title: '报事'
							}, {
								id: 1,
								htmlUrl: 'html/NewNotice/index.html',
								imgUrl: 'images/NOTEPAD.png',
								title: '公告'
							}, {
								id: 2,
								imgUrl: 'images/tongxu.png',
								htmlUrl: 'html/address.html',
								title: '通讯录'
							}, {
								id: 3,
								imgUrl: 'images/CALENDAR_OK.png',
								htmlUrl: 'html/ddd.html',
								title: '已完成',
								num: 2
							}, //{
							//							id: 4,
							//							imgUrl: 'images/CALENDAR_ADD.png',
							//							title: '未指派'
							//						}, {
							//							id: 5,
							//							imgUrl: 'images/TIME.png',ds
							//							title: '进行中'
							//						}, {
							//							id: 6,
							//							imgUrl: 'images/VIEW.png',
							//							title: '待审核'
							//						}, 
						]
					},
					computed: {
						NewtTime: function() {
							return this.presentTime.year + '-' + this.presentTime.month + '-' + this.presentTime.day
						}
					},
					created: function() {
						this.getLaoLi()
					},
					methods: {
						backlogClick: function(num) { // 跳转至工单页面
							mui.openWindow({
								url: 'html/ddd.html',
								id: 'html/ddd.html',
								extras: {
									name: num
								},
								waiting: {
									autoShow: false
								}
							});
						},

						openIconListClick: function(item) { // tabiocn 跳转方法事件
							if(item.htmlUrl) {
								mui.openWindow({
									url: item.htmlUrl,
									id: item.htmlUrl,
									extras: {
										name: item.num ? item.num : ''
									},
									waiting: {
										autoShow: false
									}
								});
							}
						},

						noticeClick: function() { // 公告跳转事件
							mui.openWindow({
								url: 'html/NewNotice/index.html',
								id: 'NewNotice/index.html',
								waiting: {
									autoShow: false
								}
							});
						},

						bellClick: function() {
							mui.openWindow({
								url: 'html/NewNotice/index.html',
								id: 'NewNotice/index.html',

								waiting: {
									autoShow: false
								}
							});
						},

						getLaoLi: function() {
							var data = this.presentTime
							var that = this
							console.log(data.year + '-' + data.month + '-' + data.day)
							mui.post('http://v.juhe.cn/laohuangli/d', {
								key: '968e9e87d76fba3653b87420d99f6396',
								date: data.year + '-' + data.month + '-' + data.day
							}, function(res) {

								var shiYi = res.result.yi.split(' ')

								var yi = shiYi.slice(0, 4)
								res.result.yi = yi.join(" ")
								that.result = res.result
							})
						}
					}
				})
				window.addEventListener('refresh', function(e) { //执行刷新
					location.reload();
				});
				mui.plusReady(function() {
					openWindow() // 判断用户是否登录方法
					GetHomePage() // 获取主页参数
					void plus.navigator.setStatusBarBackground('#1B77F6');
					void plus.navigator.setStatusBarStyle("light");
					if (!mui.os.android) {
						FastClick.attach(document.body);
					}
					var self = plus.webview.currentWebview();
					self.addEventListener('show', function() {
//							location.reload();
					})

					// 创建子webview窗口 并初始化
					var aniShow = {};
					util.initSubpage(aniShow);

					var nview = plus.nativeObj.View.getViewById('tabBar'),
						activePage = plus.webview.currentWebview(),
						targetPage,
						subpages = util.options.subpages,
						pageW = window.innerWidth,
						currIndex = 0;
					activePage.setPullToRefresh({
						support: true,
						style: 'circle'
					}, function() {
						location.reload();
						activePage.endPullToRefresh();
					});

					/**
					 * 根据判断view控件点击位置判断切换的tab
					 */

					nview.addEventListener('click', function(e) {
						var clientX = e.clientX;
						if(clientX > 0 && clientX <= parseInt(pageW * 0.25)) {
							currIndex = 0;
						} else if(clientX > parseInt(pageW * 0.25) && clientX <= parseInt(pageW * 0.45)) {
							currIndex = 1;
						} else if(clientX > parseInt(pageW * 0.45) && clientX <= parseInt(pageW * 0.8)) {
							currIndex = 2;
						} else {
							currIndex = 3;
						}

						// 匹配对应tab窗口	
						if(currIndex > 0) {
							targetPage = plus.webview.getWebviewById(subpages[currIndex - 1]);
						} else {
							targetPage = plus.webview.currentWebview();
						}

						if(targetPage == activePage) {
							return;
						}

						if(currIndex !== 3) {
							//底部选项卡切换
							util.toggleNview(currIndex);
							// 子页面切换
							util.changeSubpage(targetPage, activePage, aniShow);
							//更新当前活跃的页面
							activePage = targetPage;
						} else {
							//底部选项卡切换
							util.toggleNview(currIndex);
							// 子页面切换
							util.changeSubpage(targetPage, activePage, aniShow);
							//更新当前活跃的页面
							activePage = targetPage;
							//						//第四个tab 打开新窗口
							//						plus.webview.open('html/new-webview.html', 'new', {}, 'slide-in-right', 500);
						}
					});

					//					getPushInfo() 
					plus.push.addEventListener("click", function(msg) {
						// 判断是从本地创建还是离线推送的消息
						switch(msg.payload) {
							case "LocalMSG":
								outSet("点击本地创建消息启动：");
								break;
							default:
								outSet("点击离线推送消息启动：");
								break;
						}
					}, false); //监听系统消息点击，click为从系统消息中心点击启动应用程序，或者receive应用从推送服务器接收到推送消息事件

					// 监听在线消息事件
					plus.push.addEventListener("receive", function(msg) {
						if(msg.aps) { // Apple APNS message
//							mui.toast("接收到在线APNS消息：");
						} else {
//							mui.toast("接收到在线透传消息：");
						}
						logoutPushMsg(msg);
					}, false);	
					plus.push.getAllMessage() //获取所有的推送消息
				});

				function logoutPushMsg(msg) {
					location.reload();
//					mui.alert(msg)
				}
                
				function openWindow() {
					var userID = plus.storage.getItem("userID")
					var stand = plus.storage.getItem('stand')
					if(!userID || !stand) {
						mui.openWindow({
							url: 'html/register.html',
							id: 'html/resgister.html',
							show: {
								aniShow: "slide-in-top"
							},
							waiting: {
								autoShow: false
							}
						});
					}
				}

				//	获取主页参数
				function GetHomePage(activePage) {
					
					if(plus.storage.getItem("userID")) {
						console.log(plus.storage.getItem("userID"))
						mui.post(httpUrl.testUrl + '/api/HomePage/GetHomePage', {
							userID: plus.storage.getItem("userID")
						}, function(res) {
							if(res.code == 1001) {
								mui('#loadings')[0].style.display = "none";
								mui.fire(plus.webview.getWebviewById("html/workOrder.html"), 'refresh');
								mui.fire(plus.webview.getWebviewById("html/statement.html"), 'refresh');
								mui.fire(plus.webview.getWebviewById("html/user.html"), 'refresh');
								loopFun($('#backlog')[0], res.data.gtasksPercentage);
								loopFun($('#audit')[0], res.data.inProgressPercentage);
								loopFun($('#accomplish')[0], res.data.completedPercentage);
								steward.homeData = res.data;
								plus.storage.setItem('neiID',res.data.neiID);
							}
						})
					}
				}

				function loopFun(el, val) {
					var bg = '#F2F2F2',
						color = '#4A9DFC',
						textColor = '#4A9DFC',
						fontSize = '20px',
						size = 12,
						r = 20,
						time = 1000,
						easing = 'linear',
						si = r + size / 2;
					xy = r + size;
					if(val < 0 || val > 100) {
						return alert('请输入0~100之间的数')
					}
					var paper = Raphael(el, (r + size) * 2, (r + size) * 2);
					paper.circle(xy, xy, r).attr({
						'stroke-width': size,
						stroke: bg
					});
					paper.customAttributes.arc = function(val) {
						var v = 360 * val / 100,
							s = -180,
							e = s + v,
							x = xy,
							y = xy,
							rad = Math.PI / 180,
							x1 = x + r * Math.sin(-s * rad),
							y1 = y + r * Math.cos(-s * rad),
							x2 = x + r * Math.sin(-e * rad),
							y2 = y + r * Math.cos(-e * rad),
							path = [
								['M', x1, y1],
								['A', r, r, 0, +(e - s > 180), 1, x2, y2]
							];
							return {
								path: path
							};
					};
					var an = paper.path().attr({
						'stroke-width': size,
						stroke: color,
						arc: 0.01
					});
					an.animate({
						stroke: color,
						arc: val
					}, time, easing);
					setTimeout(function() {
						if(val == 100) {
							paper.circle(xy, xy, r).attr({
								'stroke-width': size,
								stroke: color
							});
						}
					}, time);
					paper.customAttributes.txt = function(val) {
						return {
							text: Math.floor(val * 100) / 100 + '%'
						}
					};
				}
			}
		</script>
	</body>

</html>